import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { getModelValue, initModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { getKeyToEnum, ProductTypeCnEnum } from '@/const/enum'
import { VxeColumn, VxeTable, type VxeColumnProps, type VxeColumnPropTypes, type VxeColumnSlots, type VxeColumnSlotTypes, type VxeTableDataRow, type VxeTableProps, type VxeTablePropTypes } from 'vxe-table'
import Upload from '@/components/file/Upload'
import { Button } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'

@Component
export class ApiPushRule extends Render {

    basicFormConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                payMode: {
                    name: '数据推送地址',
                    element: 'input',
                    placeholder: '请输入蓝工盾API推送地址',
                    required: true,
                    prepend: <Button>校验</Button>
                },
                receiptId: {
                    name: '密钥',
                    element: 'input',
                    placeholder: '请填写应用密钥，即AppSecret',
                    required: true
                },
                receiptId1: {
                    name: '授权码',
                    element: 'input',
                    placeholder: '请输入推送token',
                    required: true
                },

            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                // await rechargeElesignAmount(data)
                // await updatePayManagerUser(data)
                // ElMessage.success('更新成功')
                // this.basicFormConfig.show = false
            },
            cancel: () => {
                // this.basicFormConfig.show = false
            },
            init: () => {
                initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    tableData = [
        {
            originPhrase: '',
            originPhraseName: '',
            mapPhase: '',
        }
    ]

    editConfig = {
        mode: 'cell',
        trigger: 'click'
    } as VxeTablePropTypes.EditConfig


    originPharaseRender = {
        name: 'VxeSelect',
        options: [
            {
                label: '姓名',
                value: 'name'
            }
        ]
    } as VxeColumnPropTypes.EditRender


    onAddRule() {
        this.tableData.push({
            originPhrase: '',
            originPhraseName: '',
            mapPhase: '',
        })
    }

    onRemove(index: number) {
        this.tableData.splice(index, 1)
    }

    onMounted() {
        this.basicForm = renderForm(this.basicFormConfig)
    }

    render() {
        return <div>
            <div>
                <div class="text-lg text-black-300">API推送规则</div>
                {
                    this.basicForm.element()
                }
            </div>
            <div class="text-lg text-black-300 mb-16px">映射关系设置</div>
            <VxeTable data={this.tableData} border editConfig={this.editConfig}>
                <VxeColumn title="原值字段" field="originPhrase" editRender={this.originPharaseRender}></VxeColumn>
                <VxeColumn title="原始字段名称" field="originPhraseName"></VxeColumn>
                <VxeColumn title="映射字段" field="mapPhase" editRender={{name: 'input'}}></VxeColumn>
                <VxeColumn title="操作" field="operate" v-slots= {{
                    default: (params: VxeColumnSlotTypes.DefaultSlotParams) => {
                        return <Button onClick={(row) => this.onRemove(params.rowIndex)}>删除</Button>
                    }
                }}>
                </VxeColumn>
            </VxeTable>
            <Button class="mt-20px w-full" icon={h(PlusOutlined)} onClick={this.onAddRule}>添加</Button>
        </div> 
    }

}

export default toNative<{}, {}>(ApiPushRule)